import { computed, defineComponent, reactive, ref, watch, watchEffect } from "vue";
//主题树抽屉
const TreeDrawer = defineComponent({
  name: 'TreeDrawer',
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },//控制是否编辑
    treeDrawerShow: {
      type: Boolean,
      default: false,
    },//控制抽屉显示隐藏
    treeNode: {
      type: Object,
      default: () => {}
    },//树节点对象
  },
  emits: ['close'],
  setup: (props, { slots, attrs, emit }) => {

    const formRef = ref();
    //表单校验
    const rules = reactive({
      subjectName: [
        { required: true, message: '请输入名称', trigger: 'blur' },
      ],
      description: [
        { required: true, message: '请输入描述', trigger: 'blur' },
      ],
    });

    let state = reactive({
      treeDrawerShow: false,
      drawerTitle: "",
      editForm: {
        subjectName: "",
        parentId: props.treeNode.parentId,
        previousId: props.treeNode.previousId,
        subjectLevel: props.treeNode.subjectLevel,
        description: "",
      },
    });

    //关闭抽屉
    const cancel = () => {
      state.treeDrawerShow = false;
    }

    //提交
    const confirm = () => {
      formRef.value.validate((valid: any) => {
        if (valid) {
          emit('close');
          cancel();
        }
      });
    }

    //监听抽屉状态
    watchEffect(() => {
      state.treeDrawerShow = props.treeDrawerShow;
      state.drawerTitle = props.isEdit ? "编辑主题" : "创建主题";
    });

    return () => {
      return (
        <el-drawer v-model={state.treeDrawerShow} append-to-body={true} title={state.drawerTitle} size="680px">
          {{
            default: (
              <div class="tree-drawer">
                <el-form class="drawer-body" model={state.editForm} ref={formRef} rules={rules}>
                  <el-form-item label="主题层级：" prop="">
                    <el-radio-group v-model={state.editForm.subjectLevel}>
                      <el-radio label="1" size="large">一级主题</el-radio>
                      <el-radio label="2" size="large">二级主题</el-radio>
                      <el-radio label="3" size="large">三级主题</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  {state.editForm.subjectLevel == "1" && (
                    <>
                      <el-form-item label="一级主题名称：" prop="subjectName">
                        <el-input size="large" v-model={state.editForm.subjectName} />
                      </el-form-item>
                      <el-form-item label="一级主题描述：" prop="description">
                        <el-input size="large" v-model={state.editForm.description} />
                      </el-form-item>
                    </>
                  )}
                  {state.editForm.subjectLevel == "2" && (
                    <>
                      <el-form-item label="二级主题名称：" prop="subjectName">
                        <el-input size="large" v-model={state.editForm.subjectName} />
                      </el-form-item>
                      <el-form-item label="二级主题描述：" prop="description">
                        <el-input size="large" v-model={state.editForm.description} />
                      </el-form-item>
                    </>
                  )}
                  {state.editForm.subjectLevel == "3" && (
                    <>
                      <el-form-item label="三级主题名称：" prop="subjectName">
                        <el-input size="large" v-model={state.editForm.subjectName} />
                      </el-form-item>
                      <el-form-item label="三级主题描述：" prop="description">
                        <el-input size="large" v-model={state.editForm.description} />
                      </el-form-item>
                    </>
                  )}

                </el-form>
                <div class="drawer-footer">
                  <el-button onClick={cancel}>取消</el-button>
                  <el-button type="primary" onClick={confirm}>确定</el-button>
                </div>
              </div>
            )
          }}
        </el-drawer>
      );
    }
  }
});

export default TreeDrawer;